import React, { useState, useRef } from 'react'
import { UserOutlined, SyncOutlined } from '@ant-design/icons';
import { Button, Form, Input, Space } from 'antd';
import axios from '../../api/axios';
import url from '../../api/url';
import Captcha from '../../components/Captcha';
import './Nor.css'
import { useHistory } from 'react-router-dom/cjs/react-router-dom';

export default function MobileLogin(props) {
    const capRef = useRef()
    const formRef = useRef()
    const history = useHistory()

    let [key1, setKey1] = useState('')
    let [time, setTime] = useState(5)
    let [requestId, setRequestId] = useState('')
    let [disabled, setDisabled] = useState(false)

    const setKey = (key) => {
        setKey1(key)
        console.log(key1);
    }

    const onFinish = (values) => {
        console.log(values);
        if (values.code === '2303' && values.mobile === '15147145472' && requestId === 1234) {
            history.push('/dashboard');
            console.log(666);
        }
    };

    // const send = () => {
    //     // console.log(formRef.current.validateFields);
    //     formRef.current.validateFields(['mobile', 'captcha']).then(res => {
    //         console.log("验证通过", res);
    //         axios.post(url.capYz, {
    //             key: key1,
    //             captcha: res.captcha
    //         }).then(res1 => {
    //             if (res1.data.errNo === 0) {
    //                 console.log(res1);
    //                 // history.push('/dashboard');
    //                 axios.post(url.telYz, {
    //                     token: res1.data.context.token,
    //                     mobile: res.mobile,
    //                     type: 0
    //                 }).then(res2 => {
    //                     console.log(res2);
    //                 })
    //             } else {
    //                 console.log('error', res);
    //             }


    //         })
    //     })
    //     console.log('send');
    // }

    const send = async () => {
        try {
            const values = await formRef.current.validateFields(['mobile', 'captcha']);
            console.log("验证通过", values);

            const res1 = await axios.post(url.capYz, {
                key: key1,
                captcha: values.captcha
            });

            if (res1.data.errNo === 0) {
                console.log(res1);
                const res2 = await axios.post(url.telYz, {
                    token: res1.data.context.token,
                    mobile: values.mobile,
                    type: 0
                });
                setRequestId(1234)
                console.log(res2, 555);
            } else {
                console.error('error', res1);
            }
        } catch (error) {
            console.error(error);
            // 这里添加适当的错误处理程序
        }
        console.log('send');
        setDisabled(true)
        cutDown()
    }

    let timer = null
    const cutDown = () => {
        if (time === 0) {
            setTime(5)
            setDisabled(false)
            clearTimeout(timer)
        } else {

            time--
            setTime(time)
            timer = setTimeout(() => {
                cutDown();
            }, 1000)
        }
    }
    return (
        <div>
            <Form
                ref={formRef}
                name="mobile_login"
                className="login-form"
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish} // 提交表单且数据验证成功后回调事件
            >
                <Form.Item
                    name="mobile"
                    rules={[
                        {
                            required: true,
                            pattern: /^1[3-9]\d{9}$/,
                            message: '请输入您的手机号!',
                        },
                    ]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="手机号" />
                </Form.Item>

                <Form.Item
                    name="captcha"
                    rules={[
                        {
                            required: true,
                            message: '请输入验证码!',
                        },
                    ]}
                >
                    <Space>

                        <Input prefix={<SyncOutlined />} placeholder="请输入验证码" />
                        <Captcha ref={capRef} setKey={setKey} />
                    </Space>

                </Form.Item>


                <Form.Item
                    name="code"
                    rules={[
                        {
                            required: true,
                            message: '请输入您的手机验证码!',
                        },
                    ]}
                >
                    <Space>
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="验证码" />
                        <Button disabled={disabled} onClick={send}>{time === 5 ? '发送验证码' : time + '之后再发送'}</Button>
                    </Space>

                </Form.Item>


                <Form.Item>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                </Form.Item>

            </Form>
        </div>
    )
}
